<template>
	<view class="page">
		<uni-section type="line" title="待审核订单" class="body-list">
				<uni-list :border="true" v-if="orderList.length > 0">
					<uni-list-item
						thumbSize="lg"
						direction="column"
						v-for="(item, index) in orderList"
						:key="index"
						link
						:to="`/pages/order/wait_detail?orderId=${item.orderId}`"
					>
						<template v-slot:header>
							<view class="list-item-header">
								<view class="order-no">订单号：{{item.orderId}}</view>
								<view class="pay-state" :style="{color: item.payState == 2 ? '#00aa00' : '#ff5500'}">{{item.payState == 2 ? '已支付' : '未支付'}}</view>
							</view>
						</template>
						<template v-slot:body>
							<view class="list-item-body">
								<view class="margin-top-10">设备名称：{{item.machineName}}</view>
								<view class="margin-top-10">设备编号：{{item.machineNo}}</view>
								<view class="margin-top-10">下单时间：{{item.orderTime}}</view>
								<view class="margin-top-10">订单金额：<text style="color:#ff5500">{{item.orderPrice}}</text></view>
							</view>
						</template>
					</uni-list-item>
					<uni-load-more :status="status" :icon-size="14" :content-text="contentText"></uni-load-more>
				</uni-list>
				<empty-view v-else></empty-view>
		</uni-section>
	</view>
</template>

<script>
	import EmptyView from "@/components/EmptyView"
	
	export default {
		components: {
			EmptyView
		},
		
		data() {
			return {
				orderList: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
				pageNo: 1,
				pageSize: 10
			}
		},
		
		onLoad() {
			this.getOrderList()
		},
		 
		onShow( ) {
			let uid = uni.getStorageSync('uid');
			if(!uid) {
				uni.reLaunch({
					url:'/pages/user/login'
				})
			}
			
			this.getOrderList()
		},
		
		onReachBottom() {
			if(this.status === 'more') {
				this.status = 'loading';
				this.getOrderList();
			}
		},
		
		methods: {
			onReload() {
				this.pageNo = 1;
				this.pageSize = 10;
				this.getOrderList();
			},
			
			getOrderList() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/notCheckOrderList',
					data: {
						pageNo: this.pageNo,
						pageSize: this.pageSize
					},
					success: res => {
						if(res.data.success) {
							let result = res.data.result
							let dataList = result.records
							let pn = this.pageNo;
							let datas = [];
							let status;
									
							if (pn == 1) {
								datas = dataList;
							} else {
								datas = this.orderList.concat(dataList);
							}
								
							if (result.total > datas.length) {
								pn += 1;
								status = "more"
							} else {
								status = "no-more"
							} 
							
							this.setData({
								status,
								pageNo: pn,
								orderList: datas,
							});
							
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.body-list {
		height: calc( 100vh - 120rpx );
	}
	
	.scroll-list {
		height: calc( 100vh - 120rpx - 43px);
	}
	
	.list-item-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.order-no {
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.pay-state {
			font-size: 28rpx;
		}
	}
	
	.list-item-body {
		font-size: 26rpx;
		color: #6d6d6d;
		margin-top: 20rpx;
	}
</style>